Reference Line Chart

Shows trends with a reference line to highlight key thresholds or benchmarks. This provides a visual context for interpreting the data and identifying deviations from expected values. It is useful for analyzing performance against targets, identifying outliers, or understanding the impact of interventions.

Chart:

Code:

  muze
    .canvas()  
    .columns(["Year"])
    .rows(["Horsepower"])
    .transform({
      averageLine: function averageLine(dt) {
        return dt.groupBy(
          [],
          [
            {
              aggn: DataModel.AggregationFunctions.AVG,
              field: "Horsepower",
            },
          ],
        );
      },
    })
    .layers([
      {
        mark: "bar",
        encoding: {
          y: "Horsepower",
          x: "Year",
          color: {
            value: () => colorRange[0],
          },
        },
      },
      {
        mark: "tick",
        encoding: {
          y: "Horsepower",
          x: { field: null },
          color: {
            value: () => "#3f3d3e",
          },
        },
        source: "averageLine",
      },
    ])
    .config({
      interactions: {
        tooltip: {
          includeDataFromAllLayers: true,
        },
      },
      autoGroupBy: {
        disabled: true,
      },
      legend: {
        color: {
          range: ["#fdd8d4", "#fb8072"],
        },
      },
    })